<!DOCTYPE html>
<html>
	<head>
		<title>Widget :: Paginated Drop Down</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/ui/1.8.0/jquery-ui.min.js"></script>

		<script type="text/javascript" src="../FilterJson/plugin/jquery-filter-json-plugin.js"></script>
		<script type="text/javascript" src="widget/paginated-drop-down-widget.js"></script>
		<link rel="stylesheet" type="text/css" href="style/paginated-drop-down-widget-style.css" />
		
		<style type="text/css">
			.marginTB5px {
				margin: 5px 0px;
			}
			.marginL20px {
				margin-left: 500px;
			}
			.x-inline-block {
				display: inline-block;
				zoom: 1;
				*display: inline;
				 _height: 30px;
			}
			.width250px {
				width: 250px;
			}
		</style>
	</head>
	
	<body>
		<div class="marginTB5px x-inline-block"><input type="text" class="x-search-term width250px" name="searchTerm4" value=""/></div>
		<div class="marginTB5px x-inline-block"><a href="javascript:void(0)" class="x-notifications">&nbsp;N&nbsp;</a></div>
		<div class="marginTB5px x-inline-block"><input type="text" class="x-search-term width250px" name="searchTerm5" value=""/></div>
	</body>
	
	<script type="text/javascript">
		$( document ).ready(function() {
			$( '.x-search-term:first' ).paginateddropdown({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "name",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div><div>{@:email}</div></div>"
			}).bind( "paginateddropdownitemselected", function( event, data ) {
				console.log("callback - paginateddropdownitemselected");
				console.log(event);
				console.log(data);
		    });
			
			$( '.x-notifications' ).paginateddropdown({
				url: "/rnd-congregate/resources/unread-notifications.json",
				valueProperty: 'title',
				itemTemplate: "<div title=\"{@:title}\" style=\"padding: 5px;\"><a href=\"http://www.google.com?q={@:title}\">{@:title}</a></div>",
				elementType: 'link',
				itemsPerPage: 3,
				persistState: false,
				closeBtnRequired: false,
				dropdownWidth: 200
			});

			$( '.x-search-term:last' ).paginateddropdown({
				url: "/rnd-congregate/resources/cricketers.json",
				valueProperty: "email",
				itemTemplate: "<div title=\"{@:email}\"><div>{@:name}</div><div>{@:email}</div></div>",
				customEventPrefix: "pdd",
				filterJson: {startsWith: true}
			}).bind( "pdditemselected", function( event, data ) {
				console.log("callback - pdditemselected");
				console.log(event);
				console.log(data);
		    });
		});
	</script>
</html>
